<template>
    <div>
        <div :id="this.id"></div>
    </div>
</template>

<script>
    export default {
        name: 'editor',
        props: ['id','r_content','hight'],
        data() {
            return {
                ue: '', //ueditor实例
                // contentHtml: this.r_content, //编辑器内容
                // contentTxt:'',//纯文本内容
            }
        },
        methods: {
            //初始化编辑器
            initEditor() {
                /**toolbars说明
                 * 
                 * 'anchor', //锚点
                    'undo', //撤销
                    'redo', //重做
                    'bold', //加粗
                    'indent', //首行缩进
                    'snapscreen', //截图
                    'italic', //斜体
                    'underline', //下划线
                    'strikethrough', //删除线
                    'subscript', //下标
                    'fontborder', //字符边框
                    'superscript', //上标
                    'formatmatch', //格式刷
                    'source', //源代码
                    'blockquote', //引用
                    'pasteplain', //纯文本粘贴模式
                    'selectall', //全选
                    'print', //打印
                    'preview', //预览
                    'horizontal', //分隔线
                    'removeformat', //清除格式
                    'time', //时间
                    'date', //日期
                    'unlink', //取消链接
                    'insertrow', //前插入行
                    'insertcol', //前插入列
                    'mergeright', //右合并单元格
                    'mergedown', //下合并单元格
                    'deleterow', //删除行
                    'deletecol', //删除列
                    'splittorows', //拆分成行
                    'splittocols', //拆分成列
                    'splittocells', //完全拆分单元格
                    'deletecaption', //删除表格标题
                    'inserttitle', //插入标题
                    'mergecells', //合并多个单元格
                    'deletetable', //删除表格
                    'cleardoc', //清空文档
                    'insertparagraphbeforetable', //"表格前插入行"
                    'insertcode', //代码语言
                    'fontfamily', //字体
                    'fontsize', //字号
                    'paragraph', //段落格式
                    'simpleupload', //单图上传
                    'insertimage', //多图上传
                    'edittable', //表格属性
                    'edittd', //单元格属性
                    'link', //超链接
                    'emotion', //表情
                    'spechars', //特殊字符
                    'searchreplace', //查询替换
                    'map', //Baidu地图
                    'gmap', //Google地图
                    'insertvideo', //视频
                    'help', //帮助
                    'justifyleft', //居左对齐
                    'justifyright', //居右对齐
                    'justifycenter', //居中对齐
                    'justifyjustify', //两端对齐
                    'forecolor', //字体颜色
                    'backcolor', //背景色
                    'insertorderedlist', //有序列表
                    'insertunorderedlist', //无序列表
                    'fullscreen', //全屏
                    'directionalityltr', //从左向右输入
                    'directionalityrtl', //从右向左输入
                    'rowspacingtop', //段前距
                    'rowspacingbottom', //段后距
                    'pagebreak', //分页
                    'insertframe', //插入Iframe
                    'imagenone', //默认
                    'imageleft', //左浮动
                    'imageright', //右浮动
                    'attachment', //附件
                    'imagecenter', //居中
                    'wordimage', //图片转存
                    'lineheight', //行间距
                    'edittip ', //编辑提示
                    'customstyle', //自定义标题
                    'autotypeset', //自动排版
                    'webapp', //百度应用
                    'touppercase', //字母大写
                    'tolowercase', //字母小写
                    'background', //背景
                    'template', //模板
                    'scrawl', //涂鸦
                    'music', //音乐
                    'inserttable', //插入表格
                    'drafts', // 从草稿箱加载
                    'charts', // 图表
                 */
                this.ue = UE.getEditor(this.id,{
                    UEDITOR_HOME_URL:'../static/neditor/',
                    initialFrameWidth:'100%',
                    initialFrameHeight:this.hight,
                    autoHeightEnabled:false,
                    imageActionName: "uploadimage",
                    scrawlActionName: "uploadscrawl",
                    videoActionName: "uploadvideo",
                    fileActionName: "uploadfile",
                    // initialContent:'请输入内容',
                    // autoClearinitialContent:true,
                    toolbars:[
                        [
                            "fullscreen",
                            "source",
                            "|",
                            "undo",
                            "redo",
                            "|",
                            "bold",
                            "italic",
                            "underline",
                            "fontborder",
                            "strikethrough",
                            "superscript",
                            "subscript",
                            "removeformat",
                            "formatmatch",
                            "autotypeset",
                            "blockquote",
                            "pasteplain",
                            "|",
                            "forecolor",
                            "backcolor",
                            "insertorderedlist",
                            "insertunorderedlist",
                            "selectall",
                            "cleardoc",
                            "|",
                            "rowspacingtop",
                            "rowspacingbottom",
                            "lineheight",
                            "|",
                            "customstyle",
                            "paragraph",
                            "fontfamily",
                            "fontsize",
                            "|",
                            "directionalityltr",
                            "directionalityrtl",
                            "indent",
                            "|",
                            "justifyleft",
                            "justifycenter",
                            "justifyright",
                            "justifyjustify",
                            "|",
                            "touppercase",
                            "tolowercase",
                            "|",
                            "link",
                            "unlink",
                            // "anchor",
                            "|",
                            "imagenone",
                            "imageleft",
                            "imageright",
                            "imagecenter",
                            "|",
                            // "simpleupload",
                            "insertimage",
                            "emotion",
                            "scrawl",
                            "insertvideo",
                            // "music",
                            "attachment",
                            "map",
                            // "gmap",
                            "insertframe",
                            // "webapp",
                            "pagebreak",
                            "template",
                            "background",
                            "|",
                            "insertcode",
                            "horizontal",
                            "date",
                            "time",
                            "spechars",
                            // "snapscreen",
                            "wordimage",
                            "|",
                            "inserttable",
                            "deletetable",
                            "insertparagraphbeforetable",
                            "insertrow",
                            "deleterow",
                            "insertcol",
                            "deletecol",
                            "mergecells",
                            "mergeright",
                            "mergedown",
                            "splittocells",
                            "splittorows",
                            "splittocols",
                            // "charts",
                            "|",
                            "print",
                            "preview",
                            "searchreplace",
                            // "drafts",
                            "help"
                        ]
                    ]
                })
                //编辑器准备就绪后会触发该事件
                this.ue.addListener('ready',()=>{
                    //设置可以编辑
                    this.ue.setEnabled()
                    this.ue.setContent(this.r_content)
                });
                //编辑器内容修改时
                // this.selectionchange()
            },
            /**获取HTML文本 */
            getContentHtml(){
                return this.ue.getContent();
            },
            /**获取纯文本 */
            getContentTxt(){
                return this.ue.getContentTxt();
            },
            //编辑器内容修改时
            // selectionchange() {
            //     this.ue.addListener('selectionchange', () => {
            //         // console.log(this.ue.getContent());
            //         // this.contentHtml = this.ue.getContent();
            //         // this.contentTxt = this.ue.getContentTxt();
            //     })
            // },

        },

        activated() {
            //初始化编辑器
            this.initEditor()
        },
        deactivated() {
            //销毁编辑器实例，使用textarea代替
            this.ue.destroy()
            //重置编辑器，可用来做多个tab使用同一个编辑器实例
            // this.ue.reset()
            //如果要使用同一个实例,请注释destroy()方法
        },

        computed:{
            // 利用计算属性返回prop里传过来的内容
            // revecive:function(){
            //     // console.log(this.r_content)
            //     return this.r_content;
            // }
        },

        watch:{
            // !!! 这里需要注意，需要一个watch来实时更新编辑器的内容
            // revecive:function(){
            //     this.ue.setContent(this.r_content)
            // }
        }

    }
</script>

<style>

</style>